<template>
  <view class="plan_root">
    <u-tabs
      :list="statusList"
      @change="onTabChange"
      :scrollable="false"
    ></u-tabs>

    <view class="list_box">
      <view
        class="plan_box"
        v-for="(plan, index) in dataList"
        :key="index"
        @click="toItem(plan)"
      >
        <view class="title_box">
          <view class="name">{{ plan.name }}</view>
          <view
            class="common_tag "
            :class="{
        tag_gray: plan.is_closed,
        tag_green: !plan.is_closed
      }"
          >
            {{ plan.is_closed ? '已关闭' : "未关闭" }}
          </view>
          <view class="with_flex_1" />
          <view class="arrow_right">查看</view>
        </view>
        <view class="des">{{ plan.describe }}</view>
        <view class="with_flex">
          <view class="with_flex_1" />
          <view class="common_time">{{ plan.createTime }}</view>
        </view>
      </view>
    </view>

    <view
      class="common_float_btn"
      @click="toAdd"
    />

    <HomeBtn :current="1" />
  </view>
</template>

<script>
import HomeBtn from '../../componet/homeBtn.vue';
export default {
  components: { HomeBtn },
  data() {
    return {
      visible: { show: false },
      statusList: [
        { name: "全部" }, { name: "未关闭" }, { name: "已关闭" },
      ],
      planList: [
        {
          name: "急性支气管炎",
          describe: "第一次复诊：咳嗽有好转，依然有痰，咽喉疼痛较为明显",
          createTime: "2024-03-01",
          is_closed: false,
        },
        {
          name: "急性支气管炎",
          describe: "咳嗽，黄痰带血丝，咽喉疼痛",
          createTime: "2024-02-27",
          is_closed: true,
        },
      ],
      dataList: [],
    };
  },
  methods: {
    onTabChange(tab) {
      if (tab.index == 0) {
        this.dataList = this.planList;
      } else {
        this.dataList = this.planList.filter(e => {
          if (tab.index == 2) {
            return e.is_closed;
          } else {
            return !e.is_closed;
          }
        })
      }
    },
    toItem(plan) {
      uni.navigateTo({ url: "/pages/plan/detail" });
    },
    toAdd() {

    },
  },
  mounted() {
    this.dataList = this.planList;
  },
  created() { },
};
</script>

<style
  lang="scss"
  scoped
>
.plan_root {
  background: #F8FAFE;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 98rpx;
  box-sizing: border-box;

  .list_box {
    flex: 1;
    overflow: auto;
    padding: 24rpx 40rpx 1rpx;

    .plan_box {
      background: #FFFFFF;
      box-shadow: 0rpx 8rpx 32rpx 1rpx rgba(61, 79, 124, 0.08);
      border-radius: 24rpx 24rpx 24rpx 24rpx;
      padding: 24rpx 40rpx;
      margin-bottom: 24rpx;

      .title_box {
        display: flex;
        align-items: center;
      }

      .name {
        font-size: 34rpx;
        font-weight: 800;
        color: #0D1F4F;
        line-height: 48rpx;
        margin-right: 16rpx;
      }

      .des {
        text-indent: 40rpx;
        margin: 12rpx 0;

        /*字体样式*/
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #0D1F4F;
        line-height: 40rpx;
      }

      .common_time {
        font-size: 28rpx;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        line-height: 40rpx;
        color: #9DA7C0;
      }

    }
  }
}
</style>